<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>KAA电商管理后台_商品添加</title>
	<script src="${path}/js/jquery-2.1.1.min.js"></script>
	<script src="${path}/js/sidebar-menu.js"></script>
	<%--<script src="${path}/js/uploadPreview.js"></script>--%>
	<link href="${path}/css/login.css" rel="stylesheet" media="all">
</head>
<body class="main" id="pageCotent">
	<h1>KAA电商管理后台</h1>
	<jsp:include page="sidebarNav.jsp"></jsp:include><!-- main_sidebar -->

	<div class="main_con_wrap">
		<form name="form1" method="post"
			  action="${path}/addSample" id="form1"  enctype="multipart/form-data">
			<input id="userId" name="userId" value="${userId}" style="display: none">
			<input id="themeId" name="themeId" value="${themeId}" style="display: none">
			<input id="orderId" name="orderId" value="${orderId}" style="display:none;">
		<div class="main_con goods_add">
				<span class="clear"></span>
			</p><!-- select_add -->
			<div class="upload_img">
				<span class="title fl">样片：</span>
				<div class="up_imgs">
					<input type="file"  name="myfiles" id="doc" multiple="multiple" onchange="javascript:setImagePreviews();" accept="image/*" />
					<label class="" for="doc">上传图片</label>
					<div id="dd" style=" width:100%;"></div>
				</div>
				<div class="clear"></div>
			</div>
		</div><!-- main_con -->
			<button name="button" class="goodscatadd_btn btn"  id="goodscatadd_btn" type="submit">保  存</button>
		</form>
	</div><!-- main_con_wrap -->

	<div class="footer_copyright">
		<p>苏州知行合一网络科技有限公司提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->

<script>
	/////////////////////////侧边栏按钮
	$.sidebarMenu($('.sidebar-menu'))
    //下面用于多图片上传预览功能
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("doc");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += "<div class='img_wrap' > <img id='img" + i + "'  /> </div>";
            var imgObjPreview = document.getElementById("img"+i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '150px';
                imgObjPreview.style.height = '180px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            }
            else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "150px";
                localImagId.style.height = "180px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        return true;
    }

</script>
	<style>
		.up_imgs{
			width:90%;
		}
		.up_imgs input[type="file"]{
			display:none;
		}
		.up_imgs label{
			margin:0 auto;
			background-color:#f28108;
			border-radius:5px;
			width:70%;
			color:#fff;
			font-size:16px;
			text-align:center;
			display:block;
			max-width:200px;
			line-height:35px;
			height:38px;
		}
		.img_wrap{
			margin:5px;
			float:left;
		}
	</style>
</body>
</html>